<template>
  <div class="dashboard-editor-container main-conent-minheight">
    <div>
      <el-card class="box-card" shadow="never">
        <div class="main">
          <el-form :model="Personalize" label-position="left" ref="Personalize">
            <el-row :gutter="24">
              <div style="margin:0 auto;width:45vw;">
                <div style="display:flex;justify-content:center;flex-direction: column;align-items:center;">
                  <svg-icon icon-class="tool_empty" style="font-size:100px;" />
                  <p>个性化配置</p>
                </div>
                <el-form :model="Personalize" ref="Personalize" label-width="150px">
                  <el-form-item label="平台LOGO：">
                    <el-upload action="#" list-type="picture-card" ref="upload" :class="{ hide: hideUpload }"
                      accept='image/*' :on-change="filechange" :http-request="uploadFileChange"
                      :on-preview="handlePreview" :on-remove="handleRemove" :before-remove="beforeRemove" :limit="1"
                      :on-exceed="handleExceed" :file-list="fileList">
                      <i slot="default" class="el-icon-plus"></i>
                      <div slot="file" slot-scope="{file}">
                        <img :src="file.url" class="full-image">
                        <span class="el-upload-list__item-actions">
                          <span class="el-upload-list__item-delete" @click="handleRemove(file)">
                            <i class="el-icon-delete"></i>
                          </span>
                        </span>
                      </div>
                    </el-upload>
                  </el-form-item>
                  <el-form-item label="背景图片：">
                    <el-upload action="#" list-type="picture-card" ref="upload2" :class="{ hide: hideUpload2 }"
                      accept='image/*' :on-change="filechange2" :http-request="uploadFileChange2"
                      :on-preview="handlePreview2" :on-remove="handleRemove2" :before-remove="beforeRemove2" :limit="1"
                      :on-exceed="handleExceed2" :file-list="fileList2">
                      <i slot="default" class="el-icon-plus"></i>
                      <div slot="file" slot-scope="{file}">
                        <img :src="file.url" class="full-image">
                        <span class="el-upload-list__item-actions">
                          <span class="el-upload-list__item-delete" @click="handleRemove2(file)">
                            <i class="el-icon-delete"></i>
                          </span>
                        </span>
                      </div>
                    </el-upload>
                  </el-form-item>
                  <el-form-item label="平台名称：">
                    <el-input v-model="Personalize.platformName" maxlength="15" placeholder="请输入平台名称"
                      show-word-limit></el-input>
                  </el-form-item>
                  <el-form-item label="登录页文字第一行：">
                    <el-input v-model="Personalize.descriptionText1" maxlength="50" placeholder="请输入描述文字"
                      show-word-limit></el-input>
                  </el-form-item>
                  <el-form-item label="登录页文字第二行：">
                    <el-input v-model="Personalize.descriptionText2" maxlength="50" placeholder="请输入描述文字"
                      show-word-limit></el-input>
                  </el-form-item>
                  <el-form-item label="登录页文字第三行：">
                    <el-input v-model="Personalize.descriptionText3" maxlength="50" placeholder="请输入描述文字"
                      show-word-limit></el-input>
                  </el-form-item>
                  <el-form-item label="登录页文字第四行：">
                    <el-input v-model="Personalize.descriptionText4" maxlength="50" placeholder="请输入描述文字"
                      show-word-limit></el-input>
                  </el-form-item>
                  <el-form-item label="登录页文字第五行：">
                    <el-input v-model="Personalize.descriptionText5" maxlength="50" placeholder="请输入描述文字"
                      show-word-limit></el-input>
                  </el-form-item>
                  <el-form-item label="登录页文字第六行：">
                    <el-input v-model="Personalize.descriptionText6" maxlength="50" placeholder="请输入描述文字"
                      show-word-limit></el-input>
                  </el-form-item>
                </el-form>
                <div class="submit">
                  <el-button type="primary" @click="submit()">保存配置</el-button>
                </div>
              </div>
            </el-row>
          </el-form>
        </div>
      </el-card>
    </div>
  </div>
</template>

<script>
import { connrequest, uploadfile } from '@/api/firstPage';

export default {
  data() {
    return {
      Personalize: {},
      Attach: [],
      fileList: [],
      FileSize: 0,
      imageUrl: '',
      hideUpload: false,
      FileUUID: '',
      fileList2: [],
      FileSize2: 0,
      imageUrl2: '',
      hideUpload2: false,
      FileUUID2: '',
      rules: {
        platformName: [
          { required: true, message: '请输入平台名称', trigger: 'blur' }
        ],
      }
    }
  },
  created() {
    this.getData()
  },
  methods: {
    async getData() {
      const data = {
        Filter: {
          FileName: 'param_Personalize.json'
        }
      }
      const res = await connrequest('GetUICommonParam', data)
      this.Personalize = res.Data
      this.fileList = [{name: res.Data.logoUUID, url: `/ProfilePhoto/${res.Data.logoUUID}`}]
      this.fileList2 = [{name: res.Data.logoUUID, url: `/ProfilePhoto/${res.Data.backgroundUUID}`}]
    },
    async submit() {
      this.$refs.Personalize.validate(async (valid) => {
        if (valid) {
          const data = {
            Filter: {
              FileName: 'param_Personalize.json'
            },
            Data: {
              ...this.Personalize,
              FileUUID: this.FileUUID,
              logoUUID: this.FileUUID,
              backgroundUUID: this.FileUUID2,
            }
          }
          const res = await connrequest('SetUICommonParam', data)
          if (res.Status.StatusCode === 0) {
            this.$message.success('保存成功')
          }
        }
      });
    },

    async uploadFileChange(file) {
      let formData = new FormData();
      formData.append('CmdCode', "UploadFileToTmp");
      formData.append('file', file.file);
      const res = await uploadfile(formData)
      if (res.Status.StatusCode === 0) {
        this.FileSize = file.file.size
        this.$message.success('头像上传成功')
        this.imageUrl = URL.createObjectURL(file.file);
        this.FileUUID = res.Data.UUID
      }
    },
    filechange(file, fileList) {
      let arr = []
      fileList.map(item => {
        arr.push({ OrigFileName: item.name })
      })
      this.Attach = arr
    },
    handlePreview() { },
    async handleRemove(file, fileList) {
      const data = {
        Data: {
          FileUUID: file.uid
        }
      }
      const res = await connrequest('DeleteSoftwareDictAttach', data)
      if (res.Status.StatusCode === 0) {
        this.Attach = this.Attach.filter(item => item.uid !== file.uid);
        this.FileSize = 0
        this.fileList = []
        this.hideUpload = false
        this.$message.success('logo删除成功')
      }
    },
    beforeRemove(file, fileList) {
      return this.$confirm(`确定移除 ${file.name}？`);
    },
    handleExceed(files, fileList) {
      this.$message.warning(`当前限制选择 1 个文件，本次选择了 ${files.length} 个文件，共选择了 ${files.length + fileList.length} 个文件`);
    },


    async uploadFileChange2(file) {
      let formData = new FormData();
      formData.append('CmdCode', "UploadFileToTmp");
      formData.append('file', file.file);
      const res = await uploadfile(formData)
      if (res.Status.StatusCode === 0) {
        this.FileSize = file.file.size
        this.$message.success('头像上传成功')
        this.imageUrl = URL.createObjectURL(file.file);
        this.hideUpload = true
        this.FileUUID2 = res.Data.UUID
      }
    },
    filechange2(file, fileList) {
      let arr = []
      fileList.map(item => {
        arr.push({ OrigFileName: item.name })
      })
      this.Attach = arr
    },
    handlePreview2() { },
    async handleRemove2(file, fileList) {
      const data = {
        Data: {
          FileUUID: file.uid
        }
      }
      const res = await connrequest('DeleteSoftwareDictAttach', data)
      if (res.Status.StatusCode === 0) {
        this.Attach = this.Attach.filter(item => item.uid !== file.uid);
        this.FileSize = 0
        this.fileList = []
        this.hideUpload = false
        this.$message.success('背景删除成功')
      }
    },
    beforeRemove2(file, fileList) {
      return this.$confirm(`确定移除 ${file.name}？`);
    },
    handleExceed2(files, fileList) {
      this.$message.warning(`当前限制选择 1 个文件，本次选择了 ${files.length} 个文件，共选择了 ${files.length + fileList.length} 个文件`);
    }

  }
}
</script>

<style lang="scss" scoped>
::v-deep .el-upload--picture-card {
  width: 350px;
  height: 100px;
  line-height: 110px;
}

::v-deep .el-upload-list--picture-card .el-upload-list__item {
  width: 350px;
  height: 100px;
  line-height: 110px;
}

.submit {
  display: flex;
  align-items: center;
  justify-content: center;
}
</style>